<template>
	<view>
		<!-- 注意子组件传入的值需要@tabTap监听事件 -->
		<view class="">
			<swiper-tab-hear :tabBars="tabBars" :tabIndex="tabIndex" @tabTap="tabTap" scrollWidth="width:33.33%"></swiper-tab-hear>
		</view>
		<view class="uni-tab-bar mar-top30" :style="{height:swiperHeight+'px'}" >
			<scroll-view class="list" scroll-y @scrolltolower="loadMore(index)">
				<template v-if="list.length>0">
					<!-- 列表渲染 -->
					<view class="center white-bj border-r-30 box-sizing pad-30 mar-bottom30" v-for="(item,index) in list" :key="index">
						<view class="a-center item-top pad-b-30">
							<view class="money activeColor d-a-j-c font-w-b"><text class="font-48">{{item.money}}</text><text class="font-28">元</text></view>
							<view class="title">
								<view class="font-28 font-w-b text-overflow line-h38 mar-bottom10">{{item.name}}</view>
								<view class="font-24 black60-zt line-h38" v-if="item.minprice>0">满{{item.minprice}}可用</view>
								<view class="font-24 black60-zt line-h38">使用日期至：{{item.usetime|timeStanp}}</view>
							</view>
							<view class="border-r font-24 main-bj pad-r-20 pad-l-20  line-h50" @tap="open('cate')">去使用</view>
						</view>
						<view class="font-24 black60-zt line-h35 mar-top20">{{item.remark}}</view>
					</view>
					<!-- 上拉加载 -->
					<load-more :loadText="loadText"></load-more>
				</template>
				<template v-else>
					<!-- 无内容显示 -->
					<view class="nothing d-a-j">
						<image src="../../static/empty.png" mode="widthFix"></image>
						<view class="font-26 black60-zt text-center">没有更多记录...</view>
					</view>
				</template>
			</scroll-view>
		</view>
		<view class="position-fixed foot d-a-j-c wid-100">
			<view class="center700 white-zt border-r pad-l-40 pad-r-40 line-h80 main-bj text-center box-sizing" @tap="open('balance')">立即兑换</view>
		</view>
	</view>
</template>

<script>
	import swiperTabHear from "@/pagesC/pages_com/swiper-tab-hear.vue";
	import loadMore from "@/pagesC/pages_com/load-more.vue"
	export default {
		components:{
			swiperTabHear,
			loadMore
		},
		data() {
			return {
				tabIndex:1,
				swiperHeight:500,
				tabBars: [
					{name: '优惠券', id: 1,type:'/pagesC/coupon/coupon'},
					{name: '兑换券',id: 2,type:'/pagesC/coupon/exchange'}, 
					{name: '礼包券',id: 3,type:'/pagesC/coupon/giftPack'}
				],
				query:{status:0,mid:undefined,page:1,limit:10},
				count:0,
				loadText:"上拉加载更多",
				list:[]
			}
		},
		onLoad() {
			this.query.mid=parseFloat(this.$user.state.userId)
			//获取列表的可视高度
			uni.getSystemInfo({
				success: (res) => {
					let height=res.windowHeight-uni.upx2px(100)  //获取可是窗口高度-tabbar的高度
					this.swiperHeight=height
				}
			});
			//开启分享
			wx.showShareMenu({
				withShareTicket:true,
				menus:["shareAppMessage","shareTimeline"]
			})
		},
		filters:{
			timeStanp(dataTime){
				if (dataTime === undefined) { return }
				  const time = dataTime
				  const unixTimestamp = new Date(time * 1000)
				  const commonTime = unixTimestamp.toLocaleString('en-GB', { hour12: false })
				  const tim = commonTime.split('/')
				  const year = tim[2].split(',')[0]
				  const month = tim[1]
				  const day = tim[0]
				  const tt = tim[2].split(',')[1]
				  if (time === '') {
				    return ''
				  } else {
				    return year + '/' + month + '/' + day + tt
				  }
			}
		},
		onShow() {
			this.query.page=1
			this.list=[]
			//this.getMycoupon()
		},
		//设置分享好友的内容
		onShareAppMessage(res) {
			if (res.from=="button"){
				console.log(res.target)
			}
			return {
				title:"鑫意到家",
				path: '/pages/index/index?rid=',
				desc:"鑫意到家 · 洁新留下！",
				imageUrl:"../../static/202310131154405365.png"
			}
		},
		//分享朋友圈
		onShareTimeline(res) {
			return {
				title: '鑫意到家 · 洁新留下！',
				type: 0,
				summary: "鑫意到家 · 洁新留下！",
			}
		},
		methods: {
			//获取我的优惠券
			async getMycoupon(){
				await this.$api.GetMyCouponList(this.query).then(res=>{
					if(res.code==0){
						this.list=[...this.list,...res.data.list]
						//计算是否还有
						let total_page=res.count/this.query.limit
						if(Number.isInteger(total_page)==true){
							total_page=total_page
						}else{
							total_page=Math.ceil(total_page)
						}
						if(this.query.page<total_page){
							this.loadText="上拉加载更多"
						}else{
							this.loadText="没有更多记录..."
						}
					}
				})
			},
			open(type,id,lei){
				getApp().open(type,id,lei)
			},
			//上拉加载事件
			async loadMore(){
				//判断如果文字不等于“上拉加载更多”，则不进行加载
				if(this.loadText!="上拉加载更多"){return}
				//改变加载时的文字
				this.loadText="努力加载中..."
				//模拟加载数据
				this.query.page++
			},
			//tabbar点击切换事件
			tabTap(index,type){
				uni.redirectTo({
					url:type
				})
			}
		}
	}
</script>

<style lang="scss">
	body{
	    background-color: #f6f6f6;  
	} 
	
	.nothing{
		image{
			width: 40%;
			margin: auto;
		}
	}
	.item-top{
		border-bottom: 2rpx dashed #E7E7E7;
		.money{
			width: 110rpx;
		}
		.title{
			width: 400rpx;
		}
	}
	.foot{
		bottom:50rpx;
	}
</style>
